<!--  -->
<template>
  <div class="dorm-main">
    <!-- 搜索部分 -->
    <el-card>
      <div slot="header">
        <span>宿舍搜索</span>
      </div>
      <el-row>
        <el-col :gutter="20" :span="8">
          <el-input v-model="search.name" placeholder="要搜索的宿舍名"></el-input>
        </el-col>
        <el-col :span="8">
          <el-select v-model="search.sex" placeholder="选择男女宿舍">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
            <el-option label="未定" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :gutter="20" :span="8">
          <el-date-picker v-model="search.startTime" type="date" placeholder="按入住日期搜索"></el-date-picker>
        </el-col>
      </el-row>

      <el-row style="margin-top:30px;">
        <el-col :gutter="20" :span="8">
          <el-date-picker v-model="search.endTime" type="date" placeholder="按离开日期搜索"></el-date-picker>
        </el-col>

        <el-col :span="6" :offset="6" style="text-align: right;">
          <el-button type="danger" size="small" @click="doReset">重置</el-button>
          <el-button type="primary" size="small" @click="doSearch">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 搜索部分结束，下面是列表展示部分 -->
    <el-card>
      <div slot="header">
        <span>宿舍列表</span>
      </div>
       <div slot="header">
        <el-button type="primary" @click="goAdd">新增</el-button>
      </div>
      <el-table :data="dormList" border style="width: 100%">
        <el-table-column fixed type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="name" label="宿舍名称" width="150"></el-table-column>
        <el-table-column  label="宿舍类型" width="120">
          <template slot-scope="scope">
              <p v-if="scope.row.type=='0'" style="color:blue;text-align:center;">男</p>
              <p v-else-if="scope.row.type=='1'" style="color:orange;text-align:center;">女</p>
              <p v-else style="color:red;text-align:center;">未知</p>
            </template>
        </el-table-column>
        <el-table-column prop="position" label="宿舍地址" width="300"></el-table-column>
        <el-table-column prop="addTime" label="开版时间" width="150"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="150"></el-table-column>
        <el-table-column prop="bak" label="宿舍描述" width="300"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goDele(scope.row.id)">删除</el-button>
            <el-button @click="doEdit(scope.row.id)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      style="margin-top: 30px;text-align:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        :total="page.totalCount"
         layout="total, sizes, prev, pager, next, jumper"
        
      ></el-pagination>
    </el-card>
    <Detail ref="detail"/>
  </div>
</template>

<script>
import { dormList } from "@/api/xy/student"
import Detail from './Detail'
import { dele } from "@/api/xy/dorm"
export default {
  name: "dorm",
  components:{
      Detail
  },
  data() {
    return {

      search: {},
      dormList: [],
      page: {
        start: 1,
        limit: 6,
        totalCount: 0,
        sizes: [6,12,18], // 注意: element 的sizes必须是limit的整倍数
      },
    };
  },
  computed: {},
  created() {
    this.getDormList();
  },
  mounted() {},
  methods: {
    handleClick() {},
    doReset() {
       
    },
    doSearch() {
         this.page.start = 1;
        this.getDormList();
    },
    doEdit(id){
     this.$refs.detail.openDialogDetail(id);  
    },
     goAdd() {
      this.$refs.detail.openDialog();
    },
    goDele(id){
         this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dele({ id: id });
        this.getDormList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
       this.page.start = val;
      this.getDormList();
    },
    getDormList() {
      dormList({ start: this.page.start, limit: this.page.limit,...this.search }).then((res) => {
        this.dormList = res.data.list;
        console.log(res);
        this.page.totalCount = res.data.totalRow;
      })
    },
  },
};
</script>

<style lang='scss' scoped >
.dorm-main {
  .card {
    margin: 30px;
  }

//   ::v-deep .el-input__inner {
//     width: 220px;
//   }
}
</style>
